<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能办公系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" th:href="${pc} + '/static/css/table.css'" />



    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入 ElementUI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- 引入 Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <!-- 引入 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <el-container>
            <!-- 添加侧边栏 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="logo" :class="{'logo-collapse': isCollapse}">
                    <i class="el-icon-eleme"></i>
                    <span style="padding-left: 6px;" v-show="!isCollapse">{{systemTitle}}</span>
                </div>
                <el-menu
                    background-color="transparent"
                    text-color="#fff"
                    active-text-color="#00ffff"
                    :default-active="activeMenu"
                    :default-openeds="[]"
                    class="el-menu-vertical"
                    :collapse="isCollapse"
                    :collapse-transition="false">

                    <el-menu-item index="1">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>

                    <el-submenu v-for="item in menuList" :index="item.id">
                        <template slot="title">
                            <i :class="'el-icon-' + item.icon"></i>
                            <span>{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="child in item.children" :index="child.id">
                            <i :class="'el-icon-' + child.icon"></i>
                            <span>{{child.title}}</span>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>

            <el-container>
                <!-- 添加顶部导航 -->
                <el-header>
                    <div class="header-left">
                        <i class="el-icon-s-fold" @click="toggleCollapse"></i>
                    </div>
                    <div class="header-right">
                        <!-- 消息通知 -->
                        <div class="message-badge" @click="showMessages">
                            <el-badge :value="3" class="message-icon">
                                <i class="el-icon-bell"></i>
                            </el-badge>
                        </div>
                        <!-- 用户信息 -->
                        <div class="user-info">
                            <el-dropdown trigger="click">
                                <span class="user-dropdown">
                                    <i class="el-icon-user-solid"></i>
                                    superAdmin
                                    <i class="el-icon-caret-bottom"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <i class="el-icon-s-custom"></i> 个人中心
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <i class="el-icon-setting"></i> 系统设置
                                    </el-dropdown-item>
                                    <el-dropdown-item >
                                        <i class="el-icon-switch-button"></i> 退出登录
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </el-header>

                <!-- 主要内容区域 -->
                <el-main>
                    <div class="container">

                        <!-- 搜索区域 -->
                        <div class="search-area">
                            <el-select v-model="searchForm.district" placeholder="请选择区县">
                                <el-option label="环翠" value="环翠"></el-option>
                            </el-select>
                            <el-select v-model="searchForm.street" placeholder="请选择街道">
                                <el-option label="请选择街道" value=""></el-option>
                            </el-select>
                            <el-select v-model="searchForm.community" placeholder="请选择社区">
                                <el-option label="请选择社区" value=""></el-option>
                            </el-select>
                            <el-select v-model="searchForm.name" placeholder="请选择小区">
                                <el-option label="请选择小区" value=""></el-option>
                            </el-select>
                            <el-input v-model="searchForm.address" placeholder="请输入小区地址"></el-input>
                        </div>

                        <!-- 操作区域容器 -->
                        <div class="operation-container">
                            <!-- 搜索按钮组 -->
                            <div class="search-buttons">
                                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                                <el-button type="success" icon="el-icon-refresh">重置</el-button>
                            </div>

                            <!-- 操作按钮组 -->
                            <div class="action-buttons">
                                <el-button type="primary" @click="dialogVisible = true" icon="el-icon-plus">新建</el-button>
                                <el-button type="primary" icon="el-icon-upload2">人脸导入</el-button>
                                <el-button type="warning" icon="el-icon-download">导出</el-button>
                                <el-button type="warning" icon="el-icon-download">批量导入</el-button>
                                <el-button type="info" icon="el-icon-s-home">房屋状态</el-button>
                            </div>
                        </div>

                        <!-- 表格区域 -->
                        <div class="table-area">
                            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" stripe highlight-current-row>
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="id" label="编号" width="100"></el-table-column>
                                <el-table-column prop="name" label="名称" :width="200"></el-table-column>
                                <el-table-column prop="key" label="密钥">
                                    <template slot-scope="scope">
                                            <div>{{scope.row.key}}</div>
                                            <div >
                                                <el-link style="color:rgb(133 223 213 / 72%);"
                                                         :href="scope.row.url"
                                                         target="_blank"
                                                >{{scope.row.url}}</el-link>
                                            </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="time" label="创建时间" :width="160"></el-table-column>
                                <el-table-column label="关键词" >
                                    <template slot-scope="scope">
                                        <div>
                                            <el-tag type="danger" v-for="(tag, index) in scope.row.keywords.split(',')" :key="index" >{{tag}}</el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <!-- 分页 -->
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="pagination.currentPage"
                                    :page-sizes="[10, 20, 30, 50]"
                                    :page-size="pagination.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="pagination.total">
                            </el-pagination>
                        </div>

                        <!-- 新建对话框 -->
                        <el-dialog
                                title="新建"
                                :visible.sync="dialogVisible"
                                width="50%"
                                :close-on-click-modal="false"
                                :before-close="handleClose">
                            <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="名称" prop="name">
                                            <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="邀请码" prop="visitCode">
                                            <el-input clearable v-model="formData.visitCode" placeholder="请输入邀请码" style="width:130px;"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-form-item label="状态" prop="status">
                                            <el-switch v-model="formData.status">

                                            </el-switch>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item label="网址" prop="url">
                                    <el-input v-model="formData.url" placeholder="请输入网址"></el-input>
                                </el-form-item>
                                <el-form-item label="密钥" prop="apiKey">
                                    <el-input v-model="formData.apiKey" placeholder="请输入密钥"></el-input>
                                </el-form-item>
                                <el-form-item label="创建时间" prop="time">
                                    <el-date-picker
                                            v-model="formData.time"
                                            type="datetime"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="关键词" prop="keywords">
                                    <el-tag
                                            :key="tag"
                                            v-for="tag in dynamicTags"
                                            closable
                                            :disable-transitions="false"
                                            @close="handleClose(tag)">
                                        {{tag}}
                                    </el-tag>
                                    <el-input
                                            class="input-new-tag"
                                            v-if="inputVisible"
                                            v-model="inputValue"
                                            ref="saveTagInput"
                                            size="small"
                                            @keyup.enter.native="handleInputConfirm"
                                            @blur="handleInputConfirm"
                                    >
                                    </el-input>
                                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="handleClose">取 消</el-button>
                                <el-button type="primary" @click="submitForm">确 定</el-button>
                            </span>
                        </el-dialog>

                        <!-- 删除确认对话框 -->
                        <el-dialog
                                title="确认删除"
                                :visible.sync="deleteDialogVisible"
                                width="30%"
                                :close-on-click-modal="false">
                            <div style="color: #fff;">
                                <i class="el-icon-warning" style="color: #ff9900; margin-right: 10px;"></i>
                                确定要删除该小区信息吗？此操作不可恢复！
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                                <el-button type="danger" @click="confirmDelete">确 定</el-button>
                            </span>
                        </el-dialog>



                        <!-- 在container div内的最底部添加 -->
                        <div class="footer">
                            <div class="footer-content">
                                <div class="footer-section">
                                    <h3>关于我们</h3>
                                    <p>威海市智慧社区管理平台</p>
                                    <p>专注于提供智能化社区解决方案</p>
                                </div>
                                <div class="footer-section">
                                    <h3>联系方式</h3>
                                    <p>电话：400-888-9999</p>
                                    <p>邮箱：support@weihai.gov.cn</p>
                                </div>
                                <div class="footer-section">
                                    <h3>备案信息</h3>
                                    <p>Copyright © 2024 威海市智慧社区</p>
                                    <p>鲁ICP备12345678号-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    dynamicTags: ['标签一', '标签二', '标签三'],
                    inputVisible: false,
                    inputValue: '',
                    systemTitle: '智能办公系统',
                    dialogVisible: false,
                    deleteDialogVisible: false,
                    searchForm: {
                        district: '',
                        street: '',
                        community: '',
                        name: '',
                        address: ''
                    },
                    formData: {
                        name: '',
                        keywords: '',
                        url: '',
                        apiKey: '',
                        visitCode: 'iNbF1278'
                    },
                    rules: {
                        district: [
                            { required: true, message: '请选择区县', trigger: 'change' }
                        ],
                        name: [
                            { required: true, message: '请输入小区名称', trigger: 'blur' },
                            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                        ],
                        longitude: [
                            { required: true, message: '请输入经度', trigger: 'blur' },
                            { pattern: /^[\d.]+$/, message: '请输入正确的经度格式', trigger: 'blur' }
                        ],
                        latitude: [
                            { required: true, message: '请输入纬度', trigger: 'blur' },
                            { pattern: /^[\d.]+$/, message: '请输入正确的纬度格式', trigger: 'blur' }
                        ],
                        address: [
                            { required: true, message: '请输入详细地址', trigger: 'blur' }
                        ],
                        houseType: [
                            { required: true, message: '请选择房屋类型', trigger: 'change' }
                        ]
                    },

                    menuList: [
                        {
                            index: '2',
                            title: '小区管理',
                            icon: 'office-building',
                            children: [
                                { index: '2-1', title: '小区信息', icon: 'plus' },
                                { index: '2-2', title: '楼栋管理' },
                                { index: '2-3', title: '单元管理' }
                            ]
                        },
                        {
                            index: '3',
                            title: '住户管理',
                            icon: 'user',
                            children: [
                                { index: '3-1', title: '住户信息', icon: 'plus' },
                                { index: '3-2', title: '访客管理', icon: '' },
                                { index: '3-3', title: '车辆管理', icon: '' }
                            ]
                        }


                    ],

                    activeMenu: '1',  // 修改为默认选中首页
                    isCollapse: false,  // 控制菜单折叠状态
                    chartTimeRange: '7',
                    notices: [],
                    todoFilter: 'all',
                    todos: [],
                    tableData: [],
                    pagination: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 100
                    }
                }
            },
            computed: {
                completedTodos() {
                    return this.todos.filter(todo => todo.done).length;
                }
            },
            methods: {
                handleClose() {
                    this.$refs.formRef.resetFields();
                    this.dialogVisible = false;
                },
                submitForm() {
                    this.$refs.formRef.validate((valid) => {
                        if (valid) {
                            // TODO: 处理表单提交
                            console.log('表单数据:', this.formData);
                            this.$message.success('提交成功');
                            this.handleClose();
                        } else {
                            return false;
                        }
                    });
                },
                // 切换菜单折叠状态
                toggleCollapse() {
                    this.isCollapse = !this.isCollapse;
                },
                // 添加菜单点击处理方法
                handleSelect(index, indexPath) {
                    this.activeMenu = index;
                    // 根据需要处理路由跳转或其他逻辑
                },
                confirmDelete() {
                    if (this.deleteRow) {
                        // 从表格数据中移除该行
                        const index = this.tableData.findIndex(item => item.id === this.deleteRow.id);
                        if (index > -1) {
                            this.tableData.splice(index, 1);
                        }

                        // 显示删除成功提示
                        this.$message({
                            type: 'success',
                            message: '删除成功！'
                        });
                    }
                    this.deleteDialogVisible = false;
                    this.deleteRow = null;
                },
                initVisitChart() {
                    const chart = echarts.init(this.$refs.visitChart);
                    const option = {
                        backgroundColor: 'transparent',
                        tooltip: {
                            trigger: 'axis',
                            backgroundColor: 'rgba(0,0,0,0.7)',
                            borderColor: 'rgba(0,255,255,0.2)',
                            textStyle: { color: '#fff' }
                        },
                        grid: {
                            top: '40',
                            left: '30',
                            right: '30',
                            bottom: '40',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            axisLine: {
                                lineStyle: { color: 'rgba(255,255,255,0.2)' }
                            },
                            axisLabel: { color: 'rgba(255,255,255,0.7)' }
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                lineStyle: { color: 'rgba(255,255,255,0.1)' }
                            },
                            axisLabel: { color: 'rgba(255,255,255,0.7)' }
                        },
                        series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line',
                            smooth: true,
                            lineStyle: {
                                width: 3,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00ffff'
                                }, {
                                    offset: 1,
                                    color: '#0066ff'
                                }])
                            },
                            areaStyle: {
                                opacity: 0.2,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,255,255,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,102,255,0.1)'
                                }])
                            },
                            itemStyle: {
                                color: '#00ffff',
                                borderWidth: 2,
                                borderColor: '#fff'
                            }
                        }]
                    };
                    chart.setOption(option);
                    window.addEventListener('resize', () => chart.resize());
                },
                initPieChart() {
                    const chart = echarts.init(this.$refs.pieChart);
                    const option = {
                        backgroundColor: 'transparent',
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            right: 10,
                            top: 'center',
                            textStyle: { color: 'rgba(255,255,255,0.7)' }
                        },
                        series: [{
                            name: '房屋类型',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: { show: false },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '14',
                                    fontWeight: 'bold'
                                }
                            },
                            data: [
                                { value: 1048, name: '住宅' },
                                { value: 735, name: '商铺' },
                                { value: 580, name: '办公' },
                                { value: 484, name: '车位' }
                            ]
                        }]
                    };
                    chart.setOption(option);
                    window.addEventListener('resize', () => chart.resize());
                },
                initBarChart() {
                    const chart = echarts.init(this.$refs.barChart);
                    const option = {
                        backgroundColor: 'transparent',
                        tooltip: { trigger: 'axis' },
                        grid: {
                            top: '40',
                            left: '30',
                            right: '30',
                            bottom: '40',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                            axisLine: {
                                lineStyle: { color: 'rgba(255,255,255,0.2)' }
                            },
                            axisLabel: { color: 'rgba(255,255,255,0.7)' }
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                lineStyle: { color: 'rgba(255,255,255,0.1)' }
                            },
                            axisLabel: { color: 'rgba(255,255,255,0.7)' }
                        },
                        series: [{
                            data: [120, 200, 150, 80, 70, 110],
                            type: 'bar',
                            barWidth: '60%',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00ffff'
                                }, {
                                    offset: 1,
                                    color: '#0066ff'
                                }]),
                                borderRadius: [4, 4, 0, 0]
                            }
                        }]
                    };
                    chart.setOption(option);
                    window.addEventListener('resize', () => chart.resize());
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.loadTableData();
                },
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                    this.loadTableData();
                },
                handleEdit(row) {
                    console.log('编辑', row);
                    // TODO: 实现编辑功能
                },
                handleView(row) {
                    console.log('查看', row);
                    // TODO: 实现查看功能
                },
                handleDelete(row) {
                    this.$confirm('确认删除该小区信息吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // TODO: 实现删除功能
                        this.$message.success('删除成功');
                    }).catch(() => {});
                },
                loadTableData() {
                    // 模拟数据
                    this.tableData = [
                        {
                            id: 1,
                            name: 'DeepSeek',
                            key: 'sk-94af9a13d2534a309db2d118fc51c53b',
                            url: 'https://platform.deepseek.com',
                            time: '2024-01-15 16:25:46',
                            keywords: 'deepseek,深度求索'
                        }
                    ];
                },
                showMessages() {
                    // TODO: 显示消息列表
                    this.$message({
                        message: '您有3条未读消息',
                        type: 'info'
                    });
                },
                clearCompletedTodos() {
                    this.todos = this.todos.filter(todo => !todo.done);
                },
                handleClose(tag) {
                    this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
                },

                showInput() {
                    this.inputVisible = true;
                    this.$nextTick(_ => {
                        this.$refs.saveTagInput.$refs.input.focus();
                    });
                },

                handleInputConfirm() {
                    let inputValue = this.inputValue;
                    if (inputValue) {
                        this.dynamicTags.push(inputValue);
                    }
                    this.inputVisible = false;
                    this.inputValue = '';
                }
            },
            mounted() {
                this.loadTableData();
            }
        })
    </script>
</body>
</html>

